<template>
    <div class="main-box">
        <div class="search-box">
            <Form :model="searchData" ref="search" :label-width="60" inline>
                <FormItem label="时间" prop="month">
                    <DatePicker v-model="searchData.month" format="yyyy-MM" type="month" :clearable="false" @on-change="getData()"></DatePicker>
                </FormItem>
                <FormItem :label-width="20">
                    <Button type="default" @click="toReset()">重置</Button>
                    <Button type="primary" @click="getData()">搜索</Button>
                    <Button type="success" @click="toExport()">导出</Button>
                </FormItem>
            </Form>
        </div>
        <div class="table-box">
            <div class="btn-box mb15">
                <Button type="primary" @click="changeDetailShow()">{{ searchData.show_detail ? "隐藏明细" : "显示明细" }}</Button>
            </div>
            <vxe-table ref="table_detail" :data="tableData" align="center" border v-show="searchData.show_detail" :loading="loading">
                <vxe-column field="member_name" title="姓名" minWidth="120"></vxe-column>
                <vxe-colgroup title="绩效奖金">
                    <vxe-colgroup title=">5000保费数量">
                        <vxe-column field="customer_num" title="本月" minWidth="100"></vxe-column>
                        <vxe-column field="last_customer_num" title="上月" minWidth="100"></vxe-column>
                    </vxe-colgroup>
                    <vxe-colgroup title="小组成员考核指标">
                        <vxe-column field="fail_child" title="不合格" minWidth="150"></vxe-column>
                    </vxe-colgroup>
                    <vxe-colgroup title="本组自拓总保费">
                        <vxe-column field="total_sale" title="本月" minWidth="120"></vxe-column>
                        <vxe-column field="last_total_sale" title="上月" minWidth="120"></vxe-column>
                        <vxe-column field="total_sale_rate" title="增长率" minWidth="100">
                            <template #default="{ row }"> {{ Number(row.last_total_sale) == 0 ? "/" : (row.total_sale_rate * 100).toFixed(1) + "%" }} </template>
                        </vxe-column>
                    </vxe-colgroup>
                    <vxe-colgroup title="本组维护总保费">
                        <vxe-column field="total_maintenance" title="本月" minWidth="120"></vxe-column>
                        <vxe-column field="last_total_maintenance" title="上月" minWidth="120"></vxe-column>
                        <vxe-column field="total_maintenance_rate" title="增长率" minWidth="100">
                            <template #default="{ row }"> {{ Number(row.last_total_maintenance) == 0 ? "/" : (row.total_maintenance_rate * 100).toFixed(1) + "%" }} </template>
                        </vxe-column>
                    </vxe-colgroup>
                    <vxe-column field="total_bonus_amount" title="绩效奖金" minWidth="120" header-class-name="red"></vxe-column>
                </vxe-colgroup>
                <vxe-colgroup title="管理奖金">
                    <vxe-colgroup title="本组维护总保费">
                        <vxe-column field="group_total_maintenance" title="本月" minWidth="120"></vxe-column>
                        <vxe-column field="group_last_total_maintenance" title="上月" minWidth="120"></vxe-column>
                        <vxe-column field="group_maintenance_rate" title="增长率" minWidth="100">
                            <template #default="{ row }"> {{ Number(row.group_last_total_maintenance) == 0 ? "/" : (row.group_maintenance_rate * 100).toFixed(1) + "%" }} </template>
                        </vxe-column>
                        <vxe-column field="leader_maintenance_bonus_rate" title="提点" minWidth="100">
                            <template #default="{ row }"> {{ row.leader_maintenance_bonus_rate }}% </template>
                        </vxe-column>
                        <vxe-column field="leader_maintenance_bonus" title="奖金" minWidth="100" header-class-name="red"></vxe-column>
                    </vxe-colgroup>
                    <vxe-colgroup title="本组业务员绩效完成率">
                        <vxe-column field="min_level_text" title="绩效档位" minWidth="120"></vxe-column>
                        <vxe-column field="pass_total_amount" title="合格总保费" minWidth="120"></vxe-column>
                        <vxe-column field="leader_level_bonus_rate" title="提点" minWidth="100">
                            <template #default="{ row }"> {{ row.leader_level_bonus_rate }}% </template>
                        </vxe-column>
                        <vxe-column field="leader_level_bonus" title="奖金" minWidth="100" header-class-name="red"></vxe-column>
                    </vxe-colgroup>
                </vxe-colgroup>
                <vxe-colgroup title="业绩提成">
                    <vxe-colgroup title="自拓客户合作时间 < 1年">
                        <vxe-column field="leader_sale_amount_0" title="本月保费" minWidth="120"></vxe-column>
                        <vxe-column field="leader_sale_rate_0" title="提点" minWidth="120">
                            <template #default="{ row }"> 2% </template>
                        </vxe-column>
                    </vxe-colgroup>
                    <vxe-colgroup title="1年 < 自拓客户合作时间 < 2年">
                        <vxe-column field="leader_sale_amount_1" title="本月保费" minWidth="120"></vxe-column>
                        <vxe-column field="leader_sale_rate_1" title="提点" minWidth="120">
                            <template #default="{ row }"> 0.5% </template>
                        </vxe-column>
                    </vxe-colgroup>
                    <vxe-colgroup title="2年 < 自拓客户合作时间 < 3年">
                        <vxe-column field="leader_sale_amount_2" title="本月保费" minWidth="120"></vxe-column>
                        <vxe-column field="leader_sale_rate_2" title="提点" minWidth="120">
                            <template #default="{ row }"> 0.25% </template>
                        </vxe-column>
                    </vxe-colgroup>
                    <vxe-column field="leader_performance_amount" title="业绩提成" minWidth="100" header-class-name="red"></vxe-column>
                </vxe-colgroup>
                <vxe-column field="total" title="合计" minWidth="120" header-class-name="red"></vxe-column>
            </vxe-table>
            <vxe-table ref="table" :data="tableData" align="center" border v-show="!searchData.show_detail" :loading="loading">
                <vxe-column field="member_name" title="姓名" minWidth="120"></vxe-column>
                <vxe-column field="total_bonus_amount" title="绩效奖金" minWidth="100"></vxe-column>
                <vxe-colgroup title="管理奖金">
                    <vxe-column field="leader_maintenance_bonus" title="本组维护总保费-奖金" minWidth="100"></vxe-column>
                    <vxe-column field="leader_level_bonus" title="本组业务员绩效完成率-奖金" minWidth="100"></vxe-column>
                </vxe-colgroup>
                <vxe-column field="leader_performance_amount" title="业绩提成" minWidth="100"></vxe-column>
                <vxe-column field="total" title="合计" minWidth="120"></vxe-column>
            </vxe-table>
        </div>
    </div>
</template>
<script>
import api from "@/api";
export default {
    name: "performance_leader",
    data() {
        return {
            searchData: {
                month: this.$moment().subtract(1, "months").format("YYYY-MM"),
                show_detail: false,
            },
            tableData: [],
            loading: false,
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.search();
        },
        search() {
            this.getData();
        },
        getData() {
            this.loading = true;
            api.getLeaderPerformanceList({
                ...this.searchData,
                month: this.$moment(this.searchData.month).format("YYYY-MM"),
            })
                .then((res) => {
                    this.tableData = res;
                })
                .finally((res) => {
                    this.loading = false;
                });
        },
        changeDetailShow() {
            this.searchData.show_detail = !this.searchData.show_detail;
        },
        toReset() {
            this.$refs.search.resetFields();
            this.search();
        },
        toExport() {
            let close_msg = this.$Message.loading({
                content: "正在导出...",
                duration: 0,
            });
            api.getLeaderPerformanceList({
                ...this.searchData,
                month: this.$moment(this.searchData.month).format("YYYY-MM"),
                show_detail: this.searchData.show_detail ? 1 : 0,
                export: 1,
            }).then((res) => {
                const link = document.createElement("a");
                link.href = res.download_url;
                link.setAttribute("download", res.download_name);
                document.body.appendChild(link);
                link.click();
                close_msg();
            });
        },
    },
};
</script>
<style scoped lang="less">
.main-box {
    /deep/ .red {
        color: red;
    }
}
</style>
